<template>
    <div>
        <el-dialog :title="isedit ? '修改菜单' : '添加菜单'" :visible.sync="isshow" center :before-close="esc">
            <el-form :model="form" :rules="rules" ref="formName">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
                    <el-select v-model="form.pid" placeholder="请选择上级菜单">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <div v-for="item in getlist" :key="item.id">
                            <el-option :label="item.title" :value="item.id"></el-option>
                        </div>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth" prop="type">
                    <el-radio-group v-model="gettype">
                        <el-radio disabled :label="1">目录</el-radio>
                        <el-radio disabled :label="2">菜单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="form.type == 1 ? '菜单图标' : '菜单地址'" :label-width="formLabelWidth">


                    <el-input v-if="form.type == 1" v-model="form.icon" autocomplete="off"></el-input>

                    <!-- <el-input v-if="form.type == 2" v-model="form.url" autocomplete="off"></el-input> -->

                    <el-select v-if="form.type == 2" v-model="form.url" placeholder="请选择上级菜单">
                        <div>
                            <el-option v-for="item in apiurl" :key="item.path" :label="item.name" :value="item.path"></el-option>
                        </div>
                    </el-select>


                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="esc">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { menuadd, menuinfo, menuedit } from '../../request/app'
import { mapGetters, mapActions } from 'vuex'
import {apiurl}  from '../../router'
export default {
    props: ['isshow', 'isedit'],
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            apiurl,
            form: {
                pid: '',
                title: '',
                icon: '',
                type: 1,
                url: '',
                status: 2,
            },
            formLabelWidth: '120px',
            rules: {
                title: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                ],
                pid: [
                    { required: true, message: '请选择上级菜单', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择菜单类型', trigger: 'change' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters({
            getlist: 'setshop/getstatemenulist'
        }),
        gettype() {
            if (this.form.pid == 0) {
                this.form.type = 1
                return 1
            } else {
                this.form.type = 2
                return 2
            }
        }
    },
    mounted() {
        if (this.getlist.length == 0) {
            console.log(11111111111111);
            this.ACgetlist()
        }
        console.log(apiurl,'shuju1111111');
    },
    methods: {
        ...mapActions({
            ACgetlist: 'setshop/ACgetlist'
        }),
        // 只被父组件触发的事件,来实现编辑效果
        lookup(id) {
            console.log(id, '传输的id');
            menuinfo({
                id
            }).then(res => {
                console.log(res);
                this.form = res.list
                this.form.id = id
                console.log(this.form);
            })
        },
        ressize() {
            // 置空表单
            this.form = {
                pid: '',
                title: '',
                icon: '',
                type: 1,
                url: '',
                status: 2,
            }
            // 置空验证
            this.$refs.formName.resetFields();
        },
        esc() {
            // console.log(e);
            this.$emit('isshow', false)
            // 重置
            this.ressize()
        },
        sure() {
            // 查询验证
            this.$refs.formName.validate((e) => {
                console.log(e);
                if (e) {
                    // 符合验证
                    if (this.form.id) {
                        console.log('编辑');
                        menuedit(this.form)
                            .then(res => {
                                // console.log(res);
                                // 关闭对话框
                                this.esc()
                                // 重新渲染数据
                                this.ACgetlist()
                                // 重置
                                this.ressize()

                            })
                    } else {
                        console.log('添加');
                        console.log(this.form);
                        menuadd(this.form)
                            .then(res => {
                                // console.log(res);
                                // 关闭对话框
                                this.esc()
                                // 重新渲染数据
                                this.ACgetlist()
                                // 重置
                                this.ressize()

                            })
                    }

                }
            })
        },
        escc(e) {
            this.$emit('isshoww', e)
        }
    },
    components: {
    },
}
</script>

<style scoped>
</style>
